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ملاحظات قبل البدء 


ما هي lغة EEE HTML‏ 
الوسوم والشفرات O‏ 


تنسيق الصفحه a‏ 
استخدام صورة كخلفية للصفحة 


الكتابة بشكل حر ا 


محاذاة النص EEE EEE‏ 
كتابة العناوين 


النص المتحرك a‏ 
الروابط O‏ 


E EEE EEE حجم الصوره‎ 


الوسم اج O‏ 


OOO NENE ONE NENE NOES محاذاة الصوره‎ 


اضافة الوسائط الى موقعك 


E a القوائم‎ 


الجداول 


mmmmmmmnnnmnmnmnmnmnmnmnmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MMMM e 


التعريف بالكاتب 


مقدمة الكتاب 


الحمد لله رب العالمين والصلاة والسلام على اشرف خلق الله محمد بن عبد الله 


الصادق الأمين وعلى اله وصحبه وسلم تسليما كثيرا 
اما بعد" 


اضع بین ایدیکم هذا الكتاب المجاني عن احدى لغة تصميم صفحات الويب 
واقدمها واسهلها استخداما الا وهي 11 وانا من كتابتي لهذا الكتاب 


واعداده اتمنی ان يستفيد منه الجميع وهو مجاني لمن يريد ان يتعلم وارجوا 
ان ينفع به الله الامه الاسلامية . 


ملاحظات قبل البدء 


قبل البدء بتعلم هذه اللغة وقبل البدء بقراءه الكتاب ارجوا منك الالتفات الى 
الملاحظات التالية : 


-١‏ ساستخدم الالفاظ "وسم وشفره وكود وامر " وكلها معنى واحد لكلمة 
8ا فارجوا التركيز . 

بحت عك حفط الدروین بار تیت و بحت آل قر کف ای کل کی ها 
الكتاب حتى تستفيد منه كل الاستفادة . 

۳- في حالة عدم فهمك لاحدى النقاط او احد الدروس ا تتردد بالاستعانة 
بمحركات البحث لايجاد الدرس المناسب وايضا لا تتردد بالاستعانة بي 

-٤‏ يجب ان تكون عزيمتك و اصرارك مرتفعان ولا E‏ عدم 
الفهم لاحدى النقاط . 

ف لا تعفد غلى الخ واللضق في اة الشفرات والرشسوم وانها اكفها 
بنفسك لكي تتعلم بسرعة وتحفظ الاوسمة . 


ما هي لغةَ H۲11‏ 


ال ١ا۳‏ هي ليست لغة برمجة كباقي اللغات مثل السي والفيجوال بيسك انما 
هي لغة تقوم بإعطاء المتصفح معلومات عن كيفية عرض وتنسيق محتويات 
صفحات الويب و ا۳ هي |ختھصlر  Hyper Text Markup‏ 

"ص وتعني لغة النص التشعبي وتعتبر اقدم واسهل لغة لتصميم 
مواقع الويب ولا تحتاج الى أي برامج فقط يمكنك استخدام برنامج أ2مع†هم 
المدمج مع الويندوز وشفرات هذه اللغة تكتب بواسطة برامج تعديل النصوص 
وتتميز هذه اللغة عن غيرها بعدم حساسية الحروف فيها فيمكنك كتابه الشفره 
بالخط الكبير (اهاأمجء ) او الخط الصغير (االةه"٣ء)‏ طبعا الشفرات تكتب 
فقط باللغة الانجليزية ولغة |" لا تمتلك امكانيات كبيره كباقى لغات برمجة 
المواقع مثل ۷aهز‏ , مم ولكن لا يمكن الاستغناء عنها فعند البرمجة بلغة 
ال مم , معز يمكن ادراج شفرات ال ا" فيها كشفرات بسيطة 
ومساعدة . وتتوفر الان العديد من البرامج التي تمكنك من تصميم مواقع 
الانترنت بواسطة ال أا" دون الحاجة الى كتابة شفرات ال ا۳٣‏ كلما عليك 
فعله هو التصميم والبرنامج سيتكفل بتحويل التصمیم الى شفرات ٣|‏ ولكن 
يجب عليك فهم هذه اللغة لكي تتمكن منها ولكي تصبح على درايه بطريقة 
تصميم المواقع افضل من الاستعانة بالبرامج »› لا ضرر في استخدام البرامج 
ولگن على الاقل يجب ليك ان تاخ فكره عن هذه االذة 


الوسوم والشفرات 


الوسوم هي الشفرات او الاوامر التي تكتبها في لغة ا٣‏ وتكتب الوسوم بين 
ٿو سين سل هذه }> >) وتنقسم الوسوم في لغة html‏ الى قسمين وسم البداية 
ووسم النهاية فوسم البداية يكتب بين قوسين هكذا < > ووسم النهاية يكتب بين 
قوسين مثل وسم البداية ولكن يكتب هذا الرمز (/) قبل الامر ليصبح وسم 


وسم البداية = <ه|]أ> ووسم النهاية = <ع|ااًk/<‏ 


ا ا 
ي 


<149 / > الجزع الموجود هنا يظهر على التصفح <149 > 


1 


البدء بالتصميم في اأ html‏ 


للبدء بالتصميم افتح برنامج 20م6اهم او المفكرة المدمج بالويندوز او أي 
برنامج تعديل النصوص اذا كنت تستخد م نظام تشغيل غير الويندوز . 

اذا كنت تستخدم ويندوز فافتح برنامج النوت باد من ابدء >> كافة البرامج 
>> البرامج الملحقة>>> المفكرة 

كما فى الصورة ادناه : 


E 
تسادی‎ 8 

Internet Explorer 
Outlook Express ا‎ 
Windows Media Player @ 
Windows Messer Er کھ‎ 


windows Movie Maker 


Adobe Bridge c53 E 

Adobe Device central c53 E] 
Adobe Photoshop C33 [۴| 
Adobe stock Photos C53 
avast! Free Antivirus [Î 
windows Live [Î 

NeoSmart Technologies Î 


FarmatFactory Ea 


اما اذا كنت تستخدم نظام التشغيل الحر لينكس فاستخدم برنامج ال6 المدمج 
معه لتعديل النصوص لفتح البرنامج اعمل كما في الصورة: 


ll | ıı Luntitled folder - File ... | j [al goliall - File Brows... | 4 [Unsaved Document... | @) [@UTU’ SUT 25U, Ap... | 


اعند البدء بالتصميم بلغة |" فأن اول وسم يجب كتابته هو 


<html><head><title>Îiصلا‎ il gie</title><head> 
<body> 

هنا تكتب الوسوم التي ستظهر مخ ر جاتها على المتصفح 
</body>‏ 

</html> 


شرح الوسم السابق : 


<ا"۳> بداية الوسم وهو يخبر المتصفح إن هذه اللغة هي ا 
و <ا"اط /> هو نهاية الوسم و <ل20ةع> هو وسم يعطي للمتصفح وصف 
عن الق و </head>‏ هو نهاية هدا لوسم أما <iitle>‏ فهو وسم 


<ad<>/hne2dعh>وينتهي‏ وسم عنوان الصفحة ب <ه|]أ)/> اما الوسم 
<ل 00> فهو وسم جسم الصفحة وكل ما تكتبه من شفرات ووسوم ستظهر 
مخرجاتها على الصفحة مباشرة وينتهي هذا الوسم ب <لك0/> 


اول تطبيق عملي في 1"1 
اكتب الوسم التالي في برنامج المفكرة 
jlgie</title></head>‏ ائصiة>html><head><title<‏ 


<body> 


السلام عليكم ورحمة الله وبركاتة 
</body></html>‏ 


ثم من الخيار ملف اختر حفظ باسم تم اكتب أي اسم ترد ثم اكتب( ).٣|‏ 


| المستندات 
جهاذ الكمبيتر 
@ مواضع شبكة الاتصال 


blog | | 
book [Î 
ps 


.htınl 


بعد حفظ الملف بالطريفة السابقة افتحة وسيكون الناتج هو التالي : 


ملف تحير عرض المفضلة اذوات تحليفات 
] - (] - ) [8) لھ) لہ (ع] (عا لعا (3) ع ٠‏ إع) ف که 
1 | ,سح المکنب ااس2ھ |JلaغzZةLAP7OF-Saradi.ALADDIN [ğlFiDocuments and settingsiAladdin ûl‏ انتقاله 


¥ + Foxit Messages 3 Launch 3 ۴ oa 
1 


السلا علبکد ور كمه الد وبركأتة 


ملاحظة: جميع الوسوم التي سنتعلمها من الان تكتب بين الوسمين <لك0ط> 
و Do‏ ويجب ان تعلم ان أي تصميم بلغة ٣۳|‏ يجب ان يبدء بالوسم 
<> وينتهي بالوسم <ا» اا /> . 


تنسيق الصفحة 


SS GET EE کک‎ 


اولا لون الخلفية 


او الافتراضي هو اللون الون الأبيض ويمكلك تغرير اون الخافية حسب ذوقك ذل 
اذام هذا الامر لتغيير لون الخلفية 


<هنا تكتب اللون الذي تريده في الخلفية# =إد0/معوط yكodط>‏ 


لغة ا۸1 وستستخدم هذه الرموز لتغيير الوان النصوص والوصلات والخلفية 


Darkgreen Darkgray 
#006400 #ASA9SAS 
Darkmagenta 
#8BO008B 
Darkred 
#S8B0000 


تطبیق عملي على تغيير لون الخلفية 
سلون آرن ان الارن اررق كن ورن الرمت اق 


<html> <head><title>Î>iصلا‎ jlgie</title></head> 
<body bgcolor=#00008B > 
هذا النص في الصفحه‎ 
</body> 
</html> 


1 
کے‎ = E AAO BIS. O 
چ ۰ انقاد‎ F:\Documents and Settingsiûladdin ûl Garadi,ALABDIN-LAPTOP Î iol aku html | le 
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ملاحظة : الوسمان <ا۳]ا> دا۳ ]/> وسمان اساسیان یجب کتابتهما 
وهما يخبران المتصفح ان هذه اللغة هي لغة |۸۳ والوسوم في لغة إا 
سکن کان ان کک ار ھی کر کد دا ای اه کف کے ارتم اسان 
الذي استخدمناه في التطبيق العملي بالشكل التالي 


<html> 

<head> 

<ه|1أا/>عنوان الصفحة<م|)İi<‏ 

</head> 

<body bgcolor=#00008B >‏ 
هذا النص في الصفحه 

</body> 

</html> 


فهذا لا يؤثر في عمل الوسوم كما ان الفراغات بين الوسوم والشفرات لا تؤثر 
في عملها فكما قلنا لغة ا1۳ غير حساسة لحالة الاحرف . 


استخدام صورة كخلفية للصفحة 


يمكنك استخدام أي صوره كخلفية للصفحة وذلك باستخدام اللامر 


ck r 0‏ aط‏ ویكتب هذا الامر داخل الوسم <ل60۵> واليك مثا لكيفية 
استخدام هذا الامر . 


< "رابط الصورة <body background="‏ 
تطبيق عملي لكيفية استخدام صورة كخلفية للصفحة 


في هذا التطبيق سنحاول استخدام صورة لجعلها خلفية للصفحة ولنفرض ان 
الصوره التي ستستخدمها كخلفية هر م6.60( وعند كتابة اسم الصوره 
لا تنسی ان تکتب امتدادها يعني ) (jpg — bmp -— png‏ او أي امتداد اخر 
زستگون, الرسم کاتالی 


<html> 

<head><title>ةحiصلI‎ il yie</title></head> 
<body background="bbb.bmp" > 

لاحظ الصورة اصبحت خلفية للصفحة 

</body> 

</html> 


وسيكون الناتج 


علب عير روثب اة ابياته تحجلبدت 

& س 3 ھ١٠ عا فغ‎ ME EE ™ - 
e: ali. ADT APTOP al le a bd | ula 
<o 


هوامش الصفحة 


SG E ولت‎ 


مدونة علام الدين 
kurik BEE‏ 


lg Up 
Ind nS mele | eee ae Ean 1 
Urs Tr a rhs 2 


ik RES, Jee tS ES U ESF ra HENE A Us 
وعطا الموقع بدون هوافش‎ 


الموقع على اليمين ليس له هوامش اما الذي على اليسار فلديه هوامش في 
اليمين وفي اليسار وتستطيع عمل هذه الهوامش باستخدام الاوامر التالية : 

لعمل هوامش على اليمين واليسار أي جانبیهھ استخدم = |ef| "arg‏ 

ولعمل هوامش في الاعلی والاسفل استخدم الامر = ۸أ2۲9 ٣م٥0‏ 

وهذه الاوامر تعمل على متصفح انترنت اكسبلورر فقط اما المتصفح 
فایرفوکس واوبرا RE‏ 
تعمل مع متصفحات فايرفوكس واوبرا وهي الاوامر التاليه : 

لعمل ا جانبيه استخدم !لٺر = marginwidth‏ 

ولعمل هوامش في الاعلى والاسفل استخدم الٺمر = marginheight‏ 

وطبعا كلا الاوامر تكتب داخل الوسم <ل00ط> واليك مثال لكيفية كتابة 
الاوامر السابقة واستخدامها في عمل الهوامش 


<body left margiı=" شٺڻمlلl "تكتب هنا عرض‎ < 


وهناك عدة طرق لكتابة عرض الهامش اما بالنسبة مثلا %۲١‏ وسيكون حجم 


والبيكسل لكتابة حجم الهامش فهي سهلة جدا . 


اللنصوص وتنسيقها 


يوجد العديد من الوسوم في لغة ال |"]۸ لتنسيق النصوص والتعديل عليها 
كتغيير الوان النص وحجمة ونوع الخط والبدء بسطر جديد وايضا لتحديد 
مخد اة النص کجطه على بون الضنحة او شاا او ئی فی الرسط. 


الكتابة في سطر جديد 


للكتابة في سطر جديد استخدم الامر <0> فهو ينهي السطر الاول ويبدء 
طنج د ا ال الال اورت عى عله ا ا 


<html><head><tile>Îخiصلا‎ jil yie</title></head> 
<body > 

افا اک 

وحياكم الله في موقعي 

</body> 

</html> 


ag EL e STE 
موقعي " ستظهر بجوار " اهلا د وسهلا بكم "ولن تظهر في بطر جديد اذلك‎ 
يجب عليك استخدام الامر <0> للكتابة في سطر جديد وليصبح الوسم‎ 

السابق بالطريقة التاليه : 


<html><head><title> iil ilgie</title></head> 
<body > 

افلا ونلا نگم 

وحباکم الله في موقعي <۲> 

</body> 

</html> 


احفظ الملف كصفحة ويب كما تعلمت سابقا وستلاحظ ان كل عباره ستظهر في 
سطر جديد فالجملة " اهلا وسهلا بكم " ستظهر في السطر الاول والجمله 
" وحياكم الله في موقعي " ستظهر في سطر اخر . 


TO DT 
. ) جرب بنفسك فهذا من اسهل الاوامر‎ 


ملاحظة : الوسمين او الامرين <م> <0> لا يوجد لهما وسهم نهاية فقط 
وسم بداية مع ان <م> يمتلك وسم نهاية لكن ليس من المهم كتابته . 


الكتابة بشكل حر 


للكتابة بشكل حر أي الكتابة في سطر جديد او الكتابة بسطر مع ترك سطر 
<۲6م/><ه۲م> للكتابة بشكل حر انظر المثال التالي . 


<html> 

<head><iitle> ةحفiصلا عنوان‎ </title></head> 
<body> 

<pre> 

ا 

قل هو الله احد 

الله الصمد 

لم لد ولم يولد ولم يکن له كفوا احد 
</pre></body></html>‏ 


اكتب الشفرة التالية في برنامج المفكره ثم احفظة بامتداد ۲۳١‏ وستلاحظ ان 
النتيجة ستكون كما ياني 


58 
& = [ت] اھ] (ح] ]عا لھا (د) كفا‎ )×[ 
gslAladdin Al Garadî.ALABDDIN-LAPTOP{ ez SelI zh wtbooki1.html E | ols 


awe: ena © EEE 


1 
ی نة وق کوت وتم یکی که كفي ۲ 


الكتابة بخط عريض او مائل او تحته خط 


الوسوم التالية لعمل ذلك فالوسم <ط/> <ط> يستخدم للكتابة بخط عريض اما 
کک <i> e‏ ھک ا <لا/> <لا> یستخدم 


الوسم ا 
<ط/> ل اله الا اللہ حط لا اله الا الله 
<ا/> لا اله الا الله <أ> ا 
<ں/> ل اله الا الله حل> لا اله الا الله 


محاذاة النص 


محاذاة النص أي موقع النص اذا اردت ان يكون من اليمين او من اليسار او 
في الو سط ولاستخدام هذه الميزة استخدم الوسم align‏ وهذا الوسم يستخدم 


بسم الله الرحمن الرحيم < "هنا اكتب محاذاة النص "= 9اك 0> 


ولتحديد محاذاة النص استخدم ما يلي ٥-6۸6۲‏ لجعل النص في الوسط و 
)fه|‏ لجعل النص فض نفام اة right‏ لأجعل النص ف يمين الصفحة 
واليك التوضيح التالي لتفهم اكثر . 


(يكون النص في الوسط) الله اكبر ولله الحمد < alig۸1="c٥C66"‏ مp>‏ 
(يكون النص في الشمال ) الله اکبر و لہ الحمد >< >p alig۸="lef)"‏ 
(يكون النص على اليمين ( الله واكبر وله الحمد > <p align="right"‏ 


كتابة العناوين 


أكتاية العناوين في لغة ال html‏ استخدم الوسم <۸/>< > ويجب عايك 
eS‏ داخل الو سم لتحديد حجم 


الوسم حجم العنوان 
<۸1/> العنوان <1> اران 
<۸2/> العنوان <2> العنوان 
<۸3/> العنوان <3> العنوان 
<۸4/> العنوان <4> العنوان 
<۸5/> العنوان <5> العنوان 


جرب بنفسك كل خطوة لتفهم اكثر ووتعمق الفكره في ذهنك . 
الوسم <أ٣ه>‏ وخصائصة 


اولا الخاصية مما 


هذه الخاصية لتغيير نوع الخط واشهر الخطوط المثبتة في الاجهزه والانظمه 
هي Italic Times New Roman‏ , اهأ في بعض الاحيان اذا 
موقعك فان عنده e‏ بالخط الافتراضي . انظر المتال التالي . 


<font face=" Times New Roman" > dil pıڊ‎ </font> 
. Times New Roman طخllب‎ " وبهذا ستظهر الجملة " بسم الل‎ 
ثانيا الخاصية 0۲اهع‎ 


وهي خاصية تابعه 0٣‏ وهي لتغيير لون الخط باي لون اخر وطبعا اللون 
الافتراضني هو اللون الاسود اليك مثالا على كيفية استخدام هذا الامر . 


<أ "0 />النص هنا < "هنا اكتب رمز اللون الذي تریدہ "= ٥0/0۲‏ 0۸> 
اعطيتكم في بداية الكتاب مجموعه الوان مع رموزها استخدمها لتحديد لون 
انض هن خلال هذا الوسم. 


ثالثا الخاصية ٥اك‏ 


الافتراضي هو ٠‏ ولزيادة حجم الخط اكتب + ثم احد الارقام من ١الى‏ 1 


الجدول التالي ليبين لك اكثر . 

+1 الخطط 
+ الخط 
+ الخط 
+ الخط 
+ الخط 
- الخط 

۲ الخط 


وهكذا اذا اردت ان تزيد من حجم الخط اكتب + تم الرقم واذا اردت ان تنقص 
من حجم الخط اكتب - ثم الرقم ( جرب جميع الارقام لتتعرف اكثر على 
احجام الخط). انظر المثال التالي : 


حا f0‏ /> النص يكتب هنا < "حجم الخط"=size <font‏ 


وعليك الان بالتطبيق وتجربة كل الطرق حتى تتعلم وتصبح محترف للتصميم 
باستخدام ال ہہ . 


تطبيق عملي على ما سبق 


المطلوب : عمل صفحة تحتوي على مقالة وعنوان الصفحة هو لغة اتش تي ام 
ال وعنوان المقال اإيضا نفس عنوان الصفحة وحجم الخط كبير والمقاله 
مكتوبة باللون الازرق وبخط صغير والمقالة بوسط الصفحة ومكتوب بنهاية 
المقال بخط صغير التاريخ . 


افر سکن ال سم و فف رات اگل لے ( قل ان کنن لے ااخفر: 
حاول ان تكتبها بورقة ) واليك الشفره : 


<htiml><head><iitle> Û لغة اتش تي |۾م‎ >/itle>>/head> 

<body> 

<۸3/> لغة اتش تي ام ال> <h3 alig^ı="center"‏ 

<font color=#0000FF size="+1" align="center"> 

ان لغة اتش تي ام ال هي لغة بسيطة وقديمه وهي من اسهل اللغات <>"6" ali9 ١=")‏ م> 
في العالم لتصميم مواقع الانترنت وبالرغم من امكانياتها البسيطة الا <"6۲]"مc"=١ ali9‏ م> 
انها مهمة وتستخدم حتى في اللغات المتقدمة فتدر ج بعض اوسمتها <"۲ع†alig”="cen <p‏ 
في اللغات المتقدمة كالجافا .< "6۲" <p alig^="ce‏ 

</font> 

<p align="center"> 2-2-2010 

</body> 

</html> 


اما النتيجة فستكون كالتالي : 


ملف تجير عرض المقضلة آادوات تعليمات 
OA - E A- ® AMAA AA - A -‏ ® & 
e 2 FA Daocuments and SettingasiAladdin ãl Sar adi. ALãDDIN-LAPTOP iSalJl mh book! 1 .hErnl |‏ انتقاله 
&** 
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ا > 
لعه اتش تي اح ال 

ا کک + ااا ے اة hE e SS‏ 
أن لغخةه انس تى ام أل شي لغخةه بسيطه ولديمةه وشی من اسل اللغات 
م العام لتصميم مواقع الاقترنت ویار غم هن امكانياتها اليسيطة ال 
انها سس واتقتکڈے کے الشات اة قر ی بعک او سما 
نها مهمه و ھ2 فی اللغات شا ر ج بحص او سمه 

i ROE aS i EUR : 

فى اللغات المتقدمة كالجاقا 


2-2-2010 


النص المتحرك 


>arguee>>/marqueeص>‏ واستخدم الخاصیة ۲٥1٥٥و‏ لتغییر لون 
الخلفية والخاصية ٣n‏ اهلاس , ااوامم لتغيير طول وعرض الشريط 
والخاصية direction‏ أتغيير اتجاه حرکه النص فاذا اردته ان يتحرك من 
اليمين الى الشمال استخدم القيمة ا في nاiاctە‌rااdi‏ واذا اردته ان يتحرك 
من الشمال الي اليمين استخدم |١‏ وساعطيك تطبيقا عمليا على النص 
المتخرك: 

اكتب النص التالي "لا اله الا الله محمد رسول الله " واجعله يتحرك من اليمين 
الى الشمال واجعل الخلفية بلون ازرق (راجع رموز الالوان في اول الكتاب) 
ستكون الوسوم بالشكل التالي : 

¥ اله الا الته محمد رصل <marquee bgcolor=#0000ff direction="rtl"> dil‏ 


</marquee> 


اضافة الرو اظ فى الذروس اة 


الروابط 
عند زيارة مواقع الانترنت تلاحظ ازرار او نصوص وعند الضغط عليها تنقلك 
الى صفحات اخرى او مواقع اخرى وهذه تسمى الروابط ولاضافة روابط 
استخدم الوسم < ج> واليك طريقة استخدام هذا الوسم في اضافة الروابط الى 
موقعك : 


<ه/> اسم الرابط < "هنا رابط الموقع او الصفحة"= ع۸۲ 4> 


<a href="http://aladdinblog.weebly.com"> jıدلl عںء‎ ةiودم</a>‎ 


وسيكون الناتج هو : 


FiiDocuments and SettingsiAaladdin ãl Garadi, ALADDIN-LAPTOP Sell mhwibooki1 html # | 
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>" 
مذدونه علا ء الدنن 


وعند الضغط على النص " مدونة علاء الدين " ستنتقل الى الموقع 
aladdinblog.weebly.com‏ 

ولا تنسى ان تكتب /: 110 قبل عنوان الموقع اما اذا اردت اردت ان تکتب 
ڊlسم himl‏ 1 واردت Tes‏ الرابط سیکون کالتالی : 


<a href="11.hm|" > صفحتي„ي‎ </a< 


حسنا ماذا لو اردت ان تدخل صوره الى موقعك وعند الضغط على 
الشدررة قل الى ضف اخر ى اى الى ان مرن ار .الك الطرة 
لنفترض ان لديك صوره اسمها أو.٥٥‏ وتريد اضافتها الى موقعك وعند 
لضغط علبها تنقلك الى الصفحة 88.10 فان الوسم سيكرن بالشكل 
ا“ 


<a hrel="ss.html"> <img sre="cc.gif"></a> 


کک TS‏ الى مواقع الانترنت وسندرسة 
بالتفصيل ان شاء الله . 


ملاحظة : اذا كانت الصورة في نفس المجلد الذي توجد فيه صفحة 
الانترنت التي د قمت بتصميها فاكتب اسم الصورة فقط ولا تنسی الامتداد 
الخاص بالصورة اما اذا كانت الصوره محفوظة في مكان غير الذي تكون 
الضفحة حرط ة فة فاكتب المسار كاملا متا ا كانت الضررة في 
القرص ع في المجلد 0مم والصفحة في قرص اخر او مجلد اخر فان 
الوسم السابق سيكون بالشكل التالي : 


<a hrel="ss.htmlI"> <img sre="c:\photol\cc.gif"></a> 
هل فهمت ما اقصده ؟‎ 
ادراج الصور‎ 


الصور تعتبر روح الموقع وروح صفحات الانترنت فهي تعطي شكلا 
جذابا للموقع ولكن الاكثار منها يؤدي الى ثقل تصفح الموقع ولادراج 
الور ي فا و |" استخدم الوسم 5۲٥‏ 4| واليك 
توضيح لكيفية عمل هذا الوسم : 


> |٣9 S۲٥=" "موقع الصورة‎ < 


ويوجد العديد من الخصائص مع هذا الوسم لادخال الصور الى موقعك 


فاول خاصيه هي 0۲۵6۲ وهي لاضافة اطار للصوره ويستخدم بالشكل 
التالي : 


< "حجم الاطار 6٥۲="‏ ل0۲ "موقع الصورة "=٥۲؟‏ 09| > 


وياخذ حجم الاطار عدة قيم فاذا لم تكن تريد اطار على الصوره ضع 
القيمة "صفر" اما اذا كنت تريد اطار فاستخدم القيم من ١‏ الى ٦‏ فكل ما 
زدت الرقم زاد حجم الاطار 


حجم الصوره 
لتعديل حجم الصورة استخدم الامر height‏ أتحديد طول اللصورة والامر 


س لتحديد عرض الصورة وهذان الامران يستخدمان ضمن الوسم 
sre‏ 9| مثلا : 


عرض الصورة "=۸ ]ل۷ "طول الصوره بالبكسل"=اوأم "موقع الصورة |۳٣9 S۲٥="‏ > 
<"بالبکسل 


الوسم اج 


Nm E 


<"اسم الصورة"=]|ج "موقع الصورة 5۲٥="‏ 3" > 
محاذاة الصوره 
لتحديد مكان الصورة التي قمت بادخالها استخدم الامر المعروف والذدي 


ااا من قبل اتحديد محاذاة النص وهو ١٩ل‏ آاج ويستخدم بالنشگل 
اللي 


< "محاذاة الصورة"=۸ ااه "موقع الصورة |۳٣9 S۲٥="‏ > 
وياخذ الامر ۸و ااج القيم التالية : 


اا لوضع الصورة على اليمين 

لوضع الصورة على الشمال 
B00‏ لوضع الصورة في اسفل الصفحة 
٧‏ لوضع الصورة في اعلی الصفحة 


تظبيق غملى على اذراج الضور 


سنقوم باختيار صورتين وسنضيفهما الى صفحة ويب وسنضع الاولى في 
اعلى الصفحة وستكون بطول ١‏ بكسل وبعرض الصفحة والثانية 
ا ا و ۰ بکسل فهیا 


الصورتين التي ساستخدمها في التطبيق هما: 


التي على اليمين اسمها ٠١‏ والتي على الشمال " النار" اسمها ۲۲ واليك 
الشفره والوسوم التي ستستخدمها : 


<htiml><head><tile> ةڪ>iصلا‎ ilgie</title></head> 

<body> 

<img sre="22.bmp" height="100" width="100%" align="top"> 
<img sre="12.bmp" height="100%" width="200" align="right"> 
</body> 

</html> 


وستكون النتيجة هي : 
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۲١ 


ملاحظة : اذا اردت ان تجعل الصوره على طول او عرض الصفحة 
ا 100ر ٠‏ فت ما ل الور ها عرض اة 
فاكتب %٥٠‏ عند ۸لاس واذا اردت ان تكون بثلث طول الصفحة فاكتب 
۰ عند الوسم ا۸وامط وھکذا . 


اضافة الوسائط الى موقعك 


لاضافة مقطو عه موسيقيه او مقطع فيديو الى موقعك استخدم الوسم التالي 
4ص۴ وتستخدم بالشکل التالي : 


"رابط او مسار الوسائط"=C٥]5۲ <embed‏ 
ملاحظة : لا تنسى ان تكتب امتداد الملف 


ولهذا الوسم عدة خصائص وهي : 

أarاosاu‏ يستخدم في حالة انا اردت ان تجعل مقطع الو سائط يعمل 
اوتوماتيكا وتاخذ القيمتين هں] لتشغيل هذه الخاصية او هءإاه]f‏ لتعطيل 
هذه الخاصية 


Loop‏ ا م ا[ 1 1 الوسائط ا 2 کون تو قف <ê‏ 1 از“ وقت 
المقطع يعيد ويشتغل من جديد وياخذ القيمتين هر١‏ ] لتشغيل الخاصية او 
مءام]f‏ لتعطيل الخاصية 


Height , width‏ لتحدید طول وعرض مقطع الوسائط سواء فیدیو او 


>n0embed<>>/n0embed>‏ هذان الوسمان کن في حالة عدم 
وجود مشغل الوسائط المحدد في جهاز الزائر متلا اذا قمت بادخال مقطع 
فلاش الى موقعك والزائر الذي سيزور موقعك لا يملك (احتمال) مشغل 
الفلاش لذا فانك ستقوم بكتابة ملاحظة بين هذين الوسمين يظهرن للزائر 
في حالة عدم امتلاكة المشغل المناسب. (سنأخذ مثال). 


تی ع لے ااا مق راا 


سنقوم باضافة مقطع فلاش لصفحة ويب بعرض ٠۲٠١‏ وطول ٠٠١‏ 
وساستخدم المقطع الفلاشي واسمة ٤١‏ وامتدادة fلو‏ (طبعا المقطع 


والشفره والوسوم هي كالتالي: 


<html><head><title> ةح>iصلا‎ jlgie</title></head> 

<body> 

<embed src="40.swf" height="200" width="200" autostart="true" 
loop="true" > 

عفوا ليس لديك مشغل فلاش قم بتحميلة لمشاهده مقطع "b٥ d<‏ 0€"> 
/n embed <‏ الو سائط 

</body> 

</html> 


في حالة كان الشخص الذي يتصفح موقعك لديه مشغل فلاش علی جهازه 
فان النتيجة ستكون : 
Foxit Messages Launch‏ = 


۳ 


اما اذا كان الشخص الذي يتصفح موقعك لا يمتلك مشغل فلاش على 
جهازه فان النتيجة ستكون : 


۴ Fa 5 ۰ ror ۲١ 
عقوا یس لديك مشغل فادش قم بتحمیله لمشاهده مطح‎ 


ملاحظة : يمكنك استخدام الوسم ۸ واج كما استخدمناه في الصور لتحديد 
محاذاة مقطع الوسائط . 


القوائم 


في درسنا هذا سنتحدث عن القوائم وهي عبارة عن عناصر مرصوفة كل 
TG‏ 
مخافطات الم * 

اب 


صنعاءِ 


E 


E‏ هده القوائم <ol></ol> ES. er‏ للقوائم 
ا للقوائم الغير متسلسلة مثل الذي عا في الاعلى واليك 
توضیح وامثلة لتفهم اکثر : 


٠ مثال‎ 


المطلوب : كتابة قائمة بخمسة انواع من الفواكة مره متسلسلة ومره اخرى 
ارات رالسود 


<html><head><title> ةحفiصلl‎ ilgie</title></head> 
<body> 

قائمة بخمسة فراكة <أام> 
التفاح <اا> 

ب رتقال <||> 

عنب <ا|> 

بطیخ<آ|> 

موز <ا|> 

</0> 

</body> 

</html> 
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ثانيا : القائمة الغير متسلسلة وتكون الوسوم بالشكل التالي : 


<html><head><title> ةح>iصلا‎ jlgie</title></head> 
<body> 

قائمة بخمسة فواكة <الا> 
التفاح <اا> 

ب رتقال<ا|ا> 

عنب <آ|> 

بطیخ <آ|> 

موز <ا|> 

</ul> 

</body> 

</html> 


وستكون النتيجة : 
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قآئسة بخمسة فواكة 


اتا 
النفاج ٠‏ 


٠ درتقال‎ 


ملاحظة : اذا اردت تغيير النقطة التي قبل عنصر مثلا بالاحرف م,ط,ج 
او ۸,8,٤‏ او مربع صغير استخدم الخاصية همر داخل الوسم <الا> 
ويستخدم بالطريفة التالية : 


< "الذي تریدہ"=ھ مرا الا> 


۲٦ 


الوسم کیف سیظر 
a,D,C,d....... Type="a"‏ 
A,B,C; Diss Type="A"‏ 
Type="square"‏ نقطة مربعة 
Type="cyrcle"‏ نقطة دائرة 


الجداول 


الجداول معروفه لدى الجميع وهي عبارة عن خلايا لتنظيم البيانات فيها 
له اا هو رة نظ الصحا ورتب اها وفطا بل 
استخدامها بالتفصيل في المشروع الذي سنقوم به في اخر الكتاب . 
ولادراج الجداول استخدم الوسم <table></table>‏ والوسم 

<۲/><]> لاضافة صف في الجدول والوسم <ل|/><ل]> لاضافة 
خليه داخل الصف انظر الى التوضيح في الاسفل 


وهناك عدة خصائص تضاف للجداول مع وسم <عاطه]/><ءاطه†> لعل 
اهمها هي : 


bode خاصية‎ 


هذه الخاصية هي لتغيير سمك الحدود المحيطة بالجدول وتستخدم بالشكل 
الثالى ' 


> "استخدم من ۱ الع ١١‏ حسب السمك الذي ترıد <table border="‏ 
الخاصيتıن height , width‏ 


طول وعرض الجدول. 


الخاصية وہcellspaci‏ 


تستخدم لوضع مسافة بين النص الذي ستكتبه داخل الجدول وبين الحدود 
اليك الصورة التالية للتوضيح : 


قیل استفدام الوسه 


بعص أ ستخطام الو سو 1ه لخا صية 


الرحمن الرحيم 


ذه الفسافة تحد ها انت 


وتستخدم هده الخاصية بالطريقة التالية 


< "استخدم من ١‏ الي ٠١‏ حسب المسافة الذي تر بد <table cellspacing="‏ 


۲۸ 


cellpadding الخاصية‎ 


تستخدم هذه الخاصية لمباعدة الخلايا عن بعضها البعض بمعنى اخر 


< "استخدم من ١‏ الي ٠١‏ حسب المسافة الذي تريد <table cellpaQdding="‏ 
الخاصية ۸و ااج 


الجدول وام لجعلة على اليمين | لليسار 06۸16١‏ في المنتصف 
وهذا الوسم سهل ولا يحتاج الى توضيح . 


مثال : 


الحدود ٤‏ والمسافة بين النص والحدود ١‏ والعرض ۰ والطول o‏ 
وسنكتب في كل خلية اسم آي حيون وستكون الوسوم ستكون بالشكل 
التالي : 


<html><head><title> ة>iصلا‎ jlgie</title></head> 

<body> 

<table border="4" cellspacing="20" height="300" width="300" > 
<[><d> كلب‎ </(d><d> رامح</d‎ >< d> />غز ال‎ d< >/ 1< 

<[><d> درق</Id><|d>Jıi</(d><d>ة‎ رقı</‎ d> </I> 

</table> 

</body> 

</html> 


وستكون النتيجة هي : 
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ee‏ : جميع الخصائص التي ذكرناها سابقا تستطيع تطبيقها على كل 

خلية وكل خلية تاخذ الخصائص الذي تريدها وايضا على كل صف على 
کا ولاك كا الخصائض اكل الرس الحا با اع ف و انق 
خلية . وفي حالة اردت استخدام الجدول بدون حدود اجعل الخاصية 
r٣‏ تساوي " صفر " کما انه بالامکان ادراج صور وروابط وقوائم 
داخل الخلايا والصفوف بالطريقة التي تعلمتها 


خصائص متقدمة للجداول 


ا فما فن مج خا الزن الاعا ر ان ل کو 
تغيير خلفية الجدول باي لون تريد او حتى استخدام صوره كخلفية للجدول 
وايضا ستتعلم كيفية دمج خلايا الجدول وجعلها خلية واحدة واليك شرح 
مفصل هذه الخصائص 


الخاصية ٣oاoعوط‏ 


وهي لتغيير خلفية الجدول والخلايا باي لون او حتى بصوره واليك طريقة 
استخدامها : 


<هنا تكتب رمز اللون او مسار الصورة 59٥0/0١/=#‏ صاiab<‏ 


ملاحظة : اذا اردت ان تجعل الخلفية عباره عن صورة اكتب مسار 
الور ن اا ف که د ن غن التضص "* ول ی 0 
تكتب امتداد الصورة مثلا أو , م۳٥‏ , ومز . 


الخاصية ٣2مءامc‏ 


هذه الخاصية تستخدم لدمج الخلايا ببعضها مثلا اذا اردت ان تعمل جدول 
مكون من صفين الصف الاول من اعلى يكون عبارة عن ثلاث خلايا 
والصف الثاني ثلاث خلايا واردت ان تجعل الخلايا الثلاث في الصف 
الاول خلية واحدة ولكن بعرض ثلاث خلايا فانك ستستخدم هذا الوسم او 
هذه الخاصية لعمل ذلك وسيكون بالطريقة التالية : 


<html><head><title> ةڪ>iصلا‎ jlgie</title></head> 
<body> 

<table border="4" height="200" width="200"> 
<ir ><tid colspan="3" >Ji jê</td></tr> 

<ir><İd> د¬رق</(d><d>Jıi</d><d>ة /<بقر‎ d> </i> 
</table> 

</body> 

</html> 


” Foxit Messages .} Lancth I E 


ملاحظة : تستخدم هذه الخاصية 0|54١‏ داخل الوسم الخاص بانشاء 
خلايا الذي هر <ل><ل]> . 


انشاء جدول داخل جدول 


من السهل ادراج جدول داخل جدول فمثلا اذا قمت بانشاء جدول مكون 
من صفين في كل صف خليتين واردت ان تضع جدول اخر داخل الخلية 
الى ئى الصف انى نه من تل اء عدون ارول 
قم بانشاء جدول داخل الخلية بنفس الطريقة التي تعلمتها في انشاء الجداول 
رك ل و ل ل درل کی عد ااساو 
والخلايا ونفس النص كالتالي : 


الجدول الاول تكون وسومه بالشكل التالي : 


<html><head><title> ةحiصلا‎ jlgie</title></head> 

<body> 

<table border="4" cellspacing="20" height="300" width="500" > 
</><d> كلب‎ </(d><d> رامح</d‎ >< d< />غز ال‎ d< >/ 1< 

<İ[><d> درق</Id><|d>dJıi</(d><d>s‎ رقı</‎ d> </I> 

</table> 

</body> 

</html> 


۲۲ 


<html><head><title> ةحiصلا‎ jlgie</title></head> 
<body> 

<table border="4" heighti="200" width="200"> 

<ir ><id colspan="3" >wk/id></tr> 

< ><d> اںاıرgê</d><Îd> /<ار ب‎ id >< d> ¬< d> </> 
</table> 

</body> 

</html> 


ر اه اهدر اا الك اف ای و ا ا 
الذي في الجدول الاول وستكون النتيجة : 


<html><head><title> ة>iصلا‎ ilgie</title></head> 
<body> 

<table border="4" cellspacing="20" height="300" width="500" > 
</><d> كلب‎ </(d>< d> غ زال < ل )>< ل ]/>حمار‎ 
<htmli><head><title> ة>iصلا‎ ilgie</title></head> 
<body> 

<table border="4" heighti="200" width="200"> 

<r ><id colspan="3" >wk/id></tr> 

</><Îd> اںاıروغ</[d><d> />ا رنب‎ <>< ¬ “>/ d< >/ {۲> 
</table> 

</body> 

</html> 

</td></tr> 

<İ[><d> درق</|d><|d>dJıik</(d><d>s‎ رقı</‎ d> </I> 
</table> 

</body> 

</html> 


۲۳ 


وستكون النتيجة : 


oxit Messages E] Launch aE 
ھ‎ 


الامر اسهل مما تتوقع جرب فقط وعلى الله التوفيق . ستأخذ مشروع شامل 
لجميع الدروس في نهاية الكتاب . 


الأطر 


الاطر هي عبارة عن صفحات ا مجموعة في صفحة واحدة فيمكنك 
مثلا تقسيم الصفحة الى اربعه اقسام في کل قسم تعرض صفحة ۲۳ہ 
محدده ولعمل ذلك في لغة ال أصام فان ذلك يتم بواسطة الوسم 
>ameselرfr/> >frameset>‏ ويكتب هذا الوسم بدلا من الوسم 
<body>‏ داخل الصفحة و هذه الصورة توضح اکثر الاطر. 


فة فمقسهة الي ولائ اطر واچصد اټقي واټتین فو ڪي 


۲٤ 


كما قلنا يتم استبدال الوسم الخاص بالاطر بدلا من الوسم <إل0ط> 
لتصبح الشفره او الوسوم الاساسيه بالشكل التالى 


<html> 

<head><title/> عنوان الصغفحة‎ <title></head> 
<frameselt> 

هنا تكتب الوسوم الخاصة باد راج الأطر 
</frameset>‏ 

</html> 


او لا تحتاج ال ثلاث صفحات ۸1٣۳|‏ جاهزة (قم بتصميم اربع صفحات 
کما تعلمت سابقا ) انا قمت بتجهیز ثلاث صفحات ساستخدمها في الشرح 
وهي , a.html , b.tml , c.hm|‏ 


ثانيا سنقوم بتقسيم الصفحة التي سنضع الثلاث الصفحات التي جهزناها 
داخلها الى ثلاثة اقسام او بمعنى اخر الى تثلاثة اطر ويتم تقسيم الصفحة 
بالطريقة التالية: 


استخدم الوسم امع لتقسيم الصفحة عموديا او الوسم ك۷« لتقسيم 
الصفحة افقيا ويستخدمان بالشكل التالي: 


<frameset rows=" 20% , 40% ,30% , 10%"> 


في الرس الاق ات ف الد ااال ار فا ا ون 


والرابع ٠١‏ ۷هل فهمت كيف يتم تقسيم الصفحة ... اما اذا اردت ان 
تقسمها عمودیا استخدم ۶ا بدلا من ۲0۷8 کما یمکن تحدید حجم القسم 
الواحد او الاطار الواحد بالنسبه (كما فعلت بالوسم السابق ) او بالبيكسل 
كالوسم التالي: 


<frameset cols=" 200 , 100 ,150 , 90"> 


الان بعد ان قمنا بتقسيم الصفحة سوف نقوم بوضع صفحة |۸۳ بكل قسم 
ويتم ذلك عن طريق الوسم <6" ه۲> ويستخدم بالطريقة التالية: 


<ra € S۲]٤="ةحفصلا مسار‎ "< 


ار قي ااا ا اا ا ا ا ر ا 
الاول والصفحة التي تليها بالقسم الذي يلية وهكذا E‏ 


اما الان فسنقوم باضافة الاربع الصفحات (التي جهزناها في بداية الدرس 
(الى صفحة واحدة مقسمه الى اربعة اقسام قسمان افقيان وقسمان 
عموديان وسنضيف 6.۸1۳ , ا"۸۳.ج في القسمين الافقيان و ١ا".d‏ 
ا .ع في القسمان الافقين وسيكون حجم الاطاران الافقيان الاول 
٠١‏ والتاني %۷١‏ والاطاران العموديان الاول %١‏ والثاني %۸٠١‏ 
ستكون الوسوم كالتالي: 


<html> <head> <tille/> عنوان الصفحة‎ <title></head> 
<frameset rows="30% ,70%" cols="20% , 80%"> 
<frame srce="a.htmlI"> 

<frame sre="b.html"> 

<frame srce="c.html"> 

<frame srce="d.htmlI"> 

</frameselt> 

</html> 


۳٢ 


a.htmil b.html 


هنا ټظهر 
الصفية 


c. html 


هنا تظهر الصښة 
d.html‏ 


ارجوا ان تكون قد فهمت الدرس جيدا فهذه من الدروس السهله والاطر 
فر ال ف ا د ا اک کر فا دا 
الاطر . 


النماذج 


ناتك مل الاسم والبزيد الالكر وني لا شك رانك لاحخظكان فذاك 
نموذج لتعبئة البيانات فيه مثل البريد الالكتروني والاسم كالذي في الصورة 
في الاسفل : 

| Retry | .Unablëê to retrieve buttons fram Ask.com i” 2165: 


البريد الالکترونى 


1 
الى رر 


۳۷ 


<"0۲۳/>< 0۲> بالاضافة الى بعض الوسوم كحقول لادخال النص 
الوم input‏ 


وهو لاضافة حقول الى النموذج كحقل النصوص او الخيارات او غيرها 
واليك جدول يبين الحقول التي يمكن اضافتها الى النموذج : 


<input type="text" 
<input type="checkbOoX"> # 
<input type="password"> 


<input type="radio"> 


action الوسم‎ 

ويستخدم لتحديد العنوان التي سترسل اليه المعلومات التي تم ادخالها في 
النموذج وقد يكون عنوان بريد الكتروني وقد يكون عباره عن برنامج 
مكتوب بلغة اخرى كالجافا والبي اتش بي ويكتب هذا الوسم داخل الوسم 
<"0۲۳> واليك طريقة استخدام الوسم : 


<" هنا عنوان البريد الالكتر وني التي ستر سل اليه :0[اaCcii0^=""ai <form‏ 


اما اذا كنت تريد ارسال المعلومات الى برنامج اخر مكتوب بلغة اخرى 
استخدم الوسم السابق بدون :0]اأجه" ليكون بالشكل التالي : 


<"اسم البرنامج التي ستر سل اليه المعلو مات "= >0۲۳١ A٥10۸‏ 


۲۸ 


encitype مmولl‎ 


ها الرس ته راتفر الذي مقرل دة العا مات رقاك 
طريقتان لتشفير المعلومات في ال ا۳ وهي : 
7ام/×٥‏ 1 وعندما تستخدم هذا النوع تصل البيانات بالشكل التالي : 


ETE 
البريد الالكتروني‎ 
وغيرها من الخيارات التي اتد ضفتها‎ 


urlencoded-form-www-ication/xاممa‏ وعندما تستخدم هذا 
النوع من التشفير تصل البيانات بالشكل التالي : 


الاسم الذي تم ادخاله + البريد الاكتروني + الخيارات الاخرى 


٠ ت‎ ] ۳ 
.» 


الالكتروني وخيار "قرات كافة الشروط وانا موافق " وسيكون بالشكل 
الثالي : 


<html> <head><title> ةحiصلا‎ ilgie</title></head> 
<body> 

<form action="mailto:aladdin.algaradi @ gmail.com "> 
ادخل الاسم من فضلك‎ >i put type="text "< 

type="password ">‏ اinpu>‏ ادخل کلمة السرم <م> 

>" ype="checkbO0Xا >in put‏ قرات کافة الشر وط وانا موافق <م> 
</form>‏ 

</body> 

</html> 


۲۹ 


وستكون النتيجة : 


Retry | Unable to retrieve buttons fram Ask.com :l 


ادخل الاسد مل فضىڵكڭ 


1 ۴ ت 1 
ادخل تمه السر 


0 قرات كافه الشروط وأا موافق 


کن لی ران رر ای مط ع کے کے امل ات۲ اتن 


lلjزر submit‏ 
هذا الزر هو الذي يقوم بارسال البيانات عندما تقوم بالضغط عليه ويمكنك 
اضافته ا نموذجك من خلال الوسم أuم٣|ا‏ كالتالي : 


<input type="submit"> 


التالية : 


<input type="image" S]°C="aروصلا <"مسار‎ 


rese الزر‎ 


وهو لمسح كافة البيانات التي تم ادخالها من قبل المستخدم ولادراجه 
استخدم نفس الطريقه السابقة ليصبح كالتالي : 


<input type="reset"> 


اسم الزر أعءها , اأص طاء وايضا لكتابه قيمة افتراضيه داخل الحقول 
وسنبدء باسم الله : 


valu@ الوسم‎ 


وهذا الوسم يستخدم لتغيير اسم الزرين ۲656 , 8160 كما يستخدم 
لوضع قيمه افتراضيه داخل حقول النص يعني کلمات تكون جاهزه واذا 
اراد المستخدم حذفها فسيفعل ذلك . 

name اسم‎ 


اله امامت و ال را اي سے معا ها ون هر 


الوسم صS|İz‏ 


وهو لتحديد حجم الحقل كحقل النص وتكتب القيمه فيه بالبيكسل بالشكل 
التالي : 


<input type="text" size="100"> 


maxlength مwوll‎ 


ويستخدم لتحديد اقصى عدد من الحروف يمكن كتابته داخل حقل النص 
ويكتب بالشكل التالى ٠‏ 
<input type="text" maxlength="30">‏ 


فد رفا غ ای ا ااج سل و 
ويحتوي على الحقول التاليه : 

حقل لادخال الاسم وحجمة ٠١‏ واقصى عدد ممكن من الحروف ٠١‏ 

ل تخل ار اك وى حه درا اف ا ار 
الالكتروني " 

حقل لادخال كلمة سر وحجمة ۰ 


وحقل لاختيار الهوايه وستكون الوسوم بالشكل التالي : 


<html> <head><title> ةحiصلا‎ jlgie</title></head> 

<body> 

<form action="mailto:aladdin.algaradi @ gmail.com "> 

>i" pu type="text" size="40" maxlength="12">‏ ادخل الاسم من فضلك 
بريدك "=عuاva siz="50"‏ "×عا"=عypا‏ أnpuأ>‏ دخل البريد الالكتروني<م> 
< "الالكتروني 

type="password" size="30 "<‏ اİinpu>‏ ادخل کلمة السر <م> 

ما هو ايتك المفضلة <۲> 

> p< الکمبیوتر‎ >input type="checkbox" > 

<p> اإنترنت‎ >input type="checkboXx"> 

>0 الرياضة>‎ >input type="checkbOoX"> 

<p> <input type="submit" Val ue="تlنlيبلا <"ارسل‎ 

</form> 

</body> 

</html> 


ستكون النتيجة : 


Retry „Unable to retrieve buttons from Ask, corm vT rlan5a2 0 


ادخ الاسم من فضلك 


إريدك لالڪنروني] ادخل التريد الالكترونى 


ادحل كلمة السر 


ا i‏ 1 
فا شو انتلت المفقضلهة 


القوائم المنسدلة 


القوائم المنسدلة هي احدى خيارات النماذج وتستخدم القيم والخصائصه 
السابقه مع هذه القوائم كال عى , عماج۷ , ۳"6 هم ولاضافة قائمة 
منسدلة استخدم الوسم <أءعاهء/><أءم‌اهء> ولاضافة خيارات استخدم 
الوسم ١<‏ 0|أم0> ويمكن اضافة قائمة منسدلة بالطريقة التاليه : 


<selecl> 

الاصدقاء ١<‏ هام0 > البيت ١<‏ 0اامه> المدرسة <option>‏ 
الشار ع <opİio0^n>‏ 

</select> 


وستكون النتيجة : 


حقل نص متطور 


لاضافة حقل نص بطول وعرض من اختيارك استخدم الوسم 
<xtarea<>/textare2هt>‏ واستخدم معه الخاصية كام اتحديد 
الطول و الخاصية ۲٠٠۷5‏ لتحديد العرض وايضا تستخدم معه الخاصية 
مصعم الذي تقوم بتعريف الحقول فاذا اردت متلا صندوق نص بطول 
٠١‏ وعرض 1١‏ فستكون الوسوم كالتالي : 


<2عa۲×عtا/>مر‏ حبا بك اكتب نصك ièا> <textarea cols="40" ]0WS="60"‏ 


ستكون النتيجة : 


EE E ET E aS 


سطر افقي 

ا ا اى کی ااا اقا ری اها اد مر 
<۲> وهو بدون وسم نهاية واستخدم معه الخاصية 26ا8 لتحديد سمك 
هذا الخط كالتالي 


<hr Size="3"> 


وستكون النتيجة : 


مشروع تطبيقي 


بعد ان اتممنا دراسة الكتاب سوف نقوم بعمل موقع بسيط يشمل تطبيقا 
على اغلب الدروس وسيكون هذا المشروع ايضا مراجعة شاملة للكتاب 
واخذ فكرة عن كيفية التصميم بلغة ال |۸۳ وان شاء الله سيعمل كل 
شخص مشرو ع تطبيقي خاص به فلنبدء على بركة الله . 


اولا مانوع الموقع ؟ الموقع عباره عن صفحة رئيسيه تعرض فيها 
مقتطفات لعدة مقالات (في عملنا سنستخدم مفالتين) وبجوار كل مفتطف 
سيكون هناك رابط "اقرء المزيد " يؤدي الى صفحة مستقلة تعرض فيها 
المقال كاملا فلنبدء بالصفحة الرئيسيه وهي عباره عن صفحة في راسها 
صوره وبو سطها المقتطفات والصوره التي سنستخدمها في رأس الصفحة 
هي 6208۲.0۳" وهذه هي الصورة : 


والمقالات التي سنستخدمها هي مقالات عن الاحتباس الحراري ومقالة 
اخرى عن اكبر طائره في العالم وهذه المقالات مأخوذه من مدونتي 
aladdinblog.weebly.com‏ . 

ملاحظة : الصفحة الخاصة بالاحتباس الحراري هي |ا"۸.] والخاصة 
باكبر طائرة هي ".ك (سوف نقوم بانشائهما بهذين الاسمين ). 


فلنبدء بوسوم الصفحة الرئيسيه وسنقوم بوضع الصوره pط™ header.‏ 
في اعلا : e a‏ ا ی 
N EES‏ ا ۰ پیگسل 
واسم الصفحة الرئيسيه سيكون |"۸۵6×.۸۳|. 


تنبيه : عند رفع موقعكم على سيرفر او استضافة مجانية (ساعطيك عنوان 
لاستضافة مجانية في اخر الكتاب ان شاء الله ) يجب ان تقوم بتسميه 
الصفحة الرئيسية |6٣. html‏ حتى يتعرف عليها المتصفحه انها 
الصفحة الرئيسيه. 


الجداول وجعل حدود الجداول 0۲۵6۲ يساوي "صفر " حتى لا تظهر 
على الصفحة ثم تعبئة الجداول بالمحتوى الذي تريد . 


ا ی : : يجب E‏ كافة ١‏ ا التے , تہ 
حر ف ي هوم ۽ 
E‏ ا ان تكتب امتداد الملفات 


وسوم الصفحة الرئيسية : 


>title></head/<لصفحة‏ الر ئة <html> <head><tile>‏ 
<body leftmargin="300">‏ 
<img srec="header.bmp”" align="top">‏ 
<table border="0" width="100%">‏ 
<İr><d>‏ 
<۸2/> الاحتباس الحراري <N2 align="right">‏ 
<font size="2">‏ 
ظاهره الاحتباس الحراري هي ارتفاع درجة حراره الارض عن معدلها 
الطبيعي وهذه الزياده في درجة الحراره تؤدي الى مشاكل خطيره لعل 
اهما ذوبان الجليد في القطين الشمالي والجنوبي ويؤدي هذا الى ارتفاع 


Î 


منسوب مياه البحر 

</font> 

<a href="f.html"><p align="right"> ڍıjnلا ء‎ رقl</a>‎ 
</id></tr><hI> 

<tr><td><hI> 

<h2 align="right" > pلاعلا <۸2/>اكبر طائرہ في‎ 
<font size="2"> 

تعتبر الطائره ايرباص ۲۸٠‏ اكبر طائره في العالم وهي من انتاج 
شركه ايرباص وتستطيع هذه الطائره ان تطوف ثلثي العالم دون 
الحاجة الى اعادة التزود بالوقود وتستخدم وقود نظيفا غيرضارا 
في البيئه وتتميز بوسائل ال راحة والرفاهية التي تقدمها للركاب 
</font>‏ 

<a href="g.htm|"><p align="right"> ڍıjnلا ء‎ رقا</a>ح‎ 
</id></tr> 

</table> 

</body> 

</html> 


وفي النهاية ستكون النتيجة : 


موقع علاءِ اللين 


الاحتباس الحراري 


ظاهره الاحتباس الحراري سي ارتقاع درجة حراره الارض عن سعدلها الطبيعي وهذه الزياده في درجة 
الحراره تؤدي الى مشاكل خطيره لعل اهما ذوبان الجليد في القطبين الشسالي والجتوبي ويؤدي هذا الي ارتفاع 


منسوب مياه البحر 


اكبر طائره في العالم 


تعثبر الطائره ايرباص ۲٠۰‏ اكبر طائره في العالم وهي من انتاج شركه ايرباص وئستطيع هذه الطائره ان 


تطوف لني العالم دون الحاجة الى اعادة التزود بالوقود وتستخدم وقود نظيفا غيرضارا في البيه وئتمير 


بوسائل الراحة والرفاهية التي تقدمها للركاب 


الان سنقوم بانشاء الصفحة الخاصة بالاحتباس الحراري وهي الصفحة 
التي سينتقل اليها الزائر عند الضغط على الوصلة "اقرء المزيد " 
الموجودة تحت المقالة او بالمعني الاصح اسفل المقالة وسيكون اسم هذه 


الصفحة كما قلنا ".۴ وستكون كالصفحة الرئيسية يعني الصوره في 
اعلى الصفحة (م"206۲.0۳٠٥,۸)‏ والمقالة تحت الصوره وسنضع ا 
تو ضيحيه للمقال على الشمال وقي اخر المقاله سنضع رابط يؤدي للصفحة 
الرئيسية . 


هده الصوره 0م سنستخدمها کصوره تو ضیحیه بجوار المقال : 


وهذه هي الوسوم الخاصة بهذه الصفحة : 


<html> <head><title> انحراري‎ سابتحإا</title<></head>‎ 

<body leftmargin="300"> 

<img srec="header.bmp”" align="top"> 

<table border="0" width="100%"> 

<İr><d> 

<h2 alig¬="center"> الإحتباس الحراري‎ >/۸2< 

<img sre="a.png" align="left" height="150" width="150"> 

<font size="3"> 

الاحتباس الحراري هي ارتفاع در جة الحراره عن معدلها الطبيعي وظاهرة الاحتباس الحراري 
المعدل الطيعي لها وقد ازداد معدل هي ارتفاع معدل در جة الحراره على سطح الارض عن 
درجة حراره الهواء المحيط بسطح الارض ب ٠,۱۸ ± ٠,۷١‏ درجة مئويه خلال المائه السنه 
الحراره نتيجة زيادة نسبة معدل الغازات في الغلاف الجوي للارض الماضيه وارتفعت درجة 
حسب ماوردت عن اللجنه الدوليه للتغيرات المناخيه التابعه للامم المتحده 

<br> 

حذر العلماء من عواقب الاحتباس الحراري على كوكب الارض ودعوا الى اتخاذ الاجراءات 
والتي تسبب ظاهرة الاحتباس الرسميه للحد من زيادة كميه الغازات المنبعثه من المصانع 
الحراري وتعتبر الولايات المتحده الامريكيه هي من اكثر الدول المتسببه بالانبعاثات الغازيه 
. في كوكب الارض والتي تؤدي الى الاحتباس الحراري 

</font> 

<a href="index.html"><p alig¬="center">4يسيئرلا <و/<العوده للصفحة‎ 
</body></html> 


والنتيجة ستكون : 


الاحتباس الحراري 


الاحتباس الحرارفى هي ارتفاع درحة الحرأرء عن معدلها الطبيعي وظاهرة 

الاحتباس الحراري هي ارتفاع معدل درجة الحراره على سطح الارض عن 

المعدل الطبيعي لها وقد ازداد معدل درجة حراره الهواء المحيط بسطح 
الارض ب ٠,١١ ± ٠,۷٤١‏ درجة مئويه خلال المائه السته الماضيه 
وارتفعت درحة الحراره نتيجة زيادة نسبة معدل الغازات في الغلاف الجوف 

E RE. TN ا ا ت‎ ™ u 

للارض حست ماوردت عن اجه الدوليه لتغيرات اناخيه التأبعه بلامم استحده 

حذر العلماء من عواقب الاحتناس الحراري على كوكب الاأرض ودعوا الى اتخاذ الاجراءات 

الرسميه للحد من زيادة كميه الغازات المتبعثه من المصائع والتى تسبب ظاهرة الاحتباس الحرارى 

وتعتدر الولايات المتحده الأمريكيه هي من اكثر الدول المتسبيه بالانبعاثات الغازيه والتي تؤدي الى 


۔ الاحتیاس الحراری فى كوكب الارض 


العوده للصفحة الرئيسيه 


الان سنقوم بعمل الصفحة الخاصة باكبر طائره وسيكون اسمها إا".g‏ 
وسنستخدم صورة توضيحيه كاللتي في المقال السابق وسيكون اسمها 
ومز.٥‏ والوسوم على الشكل التالي : 


<html> <head><title> pJlzÛا كبر طائر ەه في‎ title></head> 
<body leftmargin="300"> 

<img srec="header.bmp”" align="top"> 

<table border="0" width="100%"> 

<ir><d> 

<۸2/> اكبر طائره في العالم <h2 alig^="ce ۸٥۲">‏ 

<img srce="c.jpg" align="left" height="150" width="150"> 

<font size="3"> 

ايرباص اي ۲۸١‏ الاوروبية الانتاج من صنع شركة ايرباص هي اكبر طائرة ركاب في العالم 
وتستطيع الطيران ل ٠١٠٠١‏ كيلومتر وهي مكونة من طابقين وتعمل باربعه محركات نفائة 
دون توقف وتبلغ سرعتها حوالي ٠٠١‏ كيلومتر في الساعه وتحمل حوالي ٠٠١‏ راكب 
وهي الطائره الاولى في العالم التي تستخدم الغاز المسال وقودا لتشغيلها من 

<br> 

في عام ۱۹۸۸ م قام مجم و عه من المهندسين الذين يعملون لدى ايرباص في العمل سرا على 
بیونج ۷٤١‏ التي انتجتها ش رکه بیونج تصمیم وتطویر طائره تجاریه قادره على منافسه طائره 
وفي عام ٠٠٠١‏ م وافق المجلس الاستشاري التابع لش ركه ايرباص على اعتماد مبلغ تسعه 
هذه الطائره مليار يورور لبناء 

</font> 


۹ 


<a href="index.htm/"><p alig¬="center">4يسيئرلا <ھ/<العوده للصفحة‎ 
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وستكون اأنتيجة : 
موقع علاء الدين 


كبر طائره في العالم 


ايرباص أى ٠٠١‏ الأوروبية الانتاج من صن شركة ايرباص هى S-‏ 


1 


طائرة رکاب فی العالم وهی مكونة من طابقين وتعمل باربعه محرگات 
نفائة وتستطيع الطبران ل ٠٠٠٠١‏ كبلومتر دون توقف وتبلغ سرعتها : 
حوالې ٥۰۰‏ کیلومتر في الساعه وتحمل حوالې ۰۰ راکب من وهي 


الطائره الاولى فى العالم الى تسنخدم الغاز المسال وقودا لتشغيلها 


فى عام ۹۸۸ م قام مجموعة من المهئدسين الذين بعملون لدى ايرباص فى العمل سرا على 

تصميم وتطوبر طائره تحاریه قادره على منافسه طائره بيونج VEY‏ انى اننجتها شرکه بونج وفى 
i o a‏ اا ê a e‏ ۲ 

عام ٠٠٠٠١‏ م وافق المجلس الأستشاري التابع لشركه ايرباص على اعثماد ملغ تسعه مليار يورور 


ناء هذه الطائرة 


طبعا هذه عباره عن صفحات بسيطه جدا وتستطيع عمل اكثر من هذا 
بكثير فقط كل ما عليك فعله هو التخطيط جيدا للموقع الذي تقوم بتصميه 
ا اال ا اا هه ور نة خي اه 
والاوامر فاذا لم يناسبك هذا فجرب اخر حتى تجد مبتغاك ولا تتردد 
ا تخ ل لل ج رر لے ا ل ا ي 
هذا الكتاب واتمني للجميع التوفيق. 


استضافة مجانية 


غفا تمي من تضم فاك الخاصة ف ناتسهل فيه المرقة 
أ40.neم. WNW‏ وهذا الموقع يعطيك ۲۰۰ میجا بایت مساحه مجانیه 
تستطيع ان ترفع موقع عليه وسيعطيك الموقع نطاق مجاني أي عنوان 
مجاني لموقعك ويقدم المزيد من الخدمات زور الموقع وسجل فيه وارفع 
موقعك الذي قمت بتصميمه اليه حتى وان لم تكن بحاجة لموقع عليك ان 
تقوم بتصميم موقع بسيط ورفعه على الاستضافة التي اعطيتك عنوانها 


اوي أي استضافة اخرى انت تعرفها حتى تشعر بانك استفدت حقا من هذا 
ألكتاب . 


ببعض النصائح (بريدي موجود في بداية الكتاب ). 


في الختام 
اتمنى ان تكونوا قد استفدتم من الكتاب ولو بالقدر البسيط واتمنى من الله 
التوفيق للجميع .... ان كنت اصبت فمن الله الذي لا اله الا هو وان كنت 
اخطت فمن نفسي والشيطان . 


والصلاه والسلام على اشرف خلق الله محمد بن عبدالله الصادق الامين 


